

<template>
  <div class="chest-pain-quality">
    <div class="box-chose">
      <!-- <el-select v-model="timeValue" @change="changeTime">
        <el-option v-for="(item, index) in timeList" :key="index" :label="item.label" :value="item.value" />
      </el-select> -->
      <span class="box-header-span">时间范围</span>
      <el-date-picker
        v-model="timeRange"
        type="monthrange"
        value-format="yyyy-MM"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        @change="changeTime"
      />
      <el-select v-model="indicatorsPlaceholder" style="margin-left: 10px;">
        <el-option v-for="(item, index) in timeList" v-show="false" :key="index" :label="item.label" :value="item.label" />
        <el-tree
          :data="data"
          show-checkbox
          :props="defaultProps"
          node-key="id"
          :default-checked-keys="defaultKeys"
          @check-change="handleCheckChange"
        />
      </el-select>
      <el-button style="float: right; margin-right: 20px;">打印</el-button>
    </div>
    <div v-loading="loading" class="box-echart">
      <el-card v-for="(item, index) in chartData" :key="index" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ index + 1 }}、{{ item.name }}</span>
        </div>
        <quality-store-chart :chart-data="item.optionData" :index="item.index" :single-chart-data="singleChartData" @clickIcon="clickIcon" @clickZuo="clickZuo" @clickYou="clickYou" />
      </el-card>
    </div>
  </div>
</template>

<script>
import qualityStoreChart from './qualityStore-chart'
import { getStatisticQuotaStrokeSdc } from '@/api/statistical/statistical-analysis'
export default {
  name: 'ChestPainQuality',
  components: {
    qualityStoreChart
  },
  data() {
    return {
      loading: false,
      indicatorsPlaceholder: '筛选指标',
      timeValue: 'quarter',
      indicators: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32],
      defaultKeys: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32],
      timeRange: [],
      timeList: [{
        label: '季度',
        value: 'quarter'
      }, {
        label: '月度',
        value: 'month'
      }, {
        label: '年度',
        value: 'year'
      }],
      data: [{
        id: 1, label: '脑梗死静脉溶栓率'
      }, {
        id: 2, label: 'DNT中位数'
      }, {
        id: 3, label: 'DNT≤60分钟达标率'
      }, {
        id: 4, label: 'DPT中位数'
      }, {
        id: 5, label: 'DPT≤90分钟达标率'
      }, {
        id: 6, label: 'ONT中位数'
      }, {
        id: 7, label: 'OPT中位数'
      }, {
        id: 8, label: '脑梗死抗血小板治疗比率'
      }, {
        id: 9, label: '脑梗死他汀类药物使用比率'
      }, {
        id: 10, label: '脑梗死吞咽困难筛查率'
      }, {
        id: 11, label: '脑梗死康复治疗率'
      }, {
        id: 12, label: '静脉溶栓及血管内治疗患者住院死亡率'
      }, {
        id: 13, label: '静脉溶栓并发症发生率'
      }, {
        id: 14, label: '血管内治疗再通率'
      }, {
        id: 15, label: '血管内治疗并发症发生率'
      }, {
        id: 16, label: '脑出血降压治疗比率'
      }, {
        id: 17, label: '脑出血吞咽困难筛查率'
      }, {
        id: 18, label: '脑出血康复治疗率'
      }, {
        id: 19, label: '脑出血手术患者住院死亡率'
      }, {
        id: 20, label: '脑出血手术并发症发生率'
      }, {
        id: 21, label: '破裂动脉瘤应用尼莫地平预防血管痉挛治疗比率'
      }, {
        id: 22, label: '破裂动脉瘤手术康复治疗率'
      }, {
        id: 23, label: '所有动脉瘤手术并发症发生率'
      }, {
        id: 24, label: '动脉瘤介入栓塞术并发症发生率'
      }, {
        id: 25, label: '动脉瘤开颅夹闭术并发症发生率'
      }, {
        id: 26, label: '所有动脉瘤手术患者住院死亡率'
      }, {
        id: 27, label: '动脉瘤介入栓塞术患者住院死亡率'
      }, {
        id: 28, label: '动脉瘤开颅夹闭术患者住院死亡率'
      }, {
        id: 29, label: 'CEA手术并发症发生率'
      }, {
        id: 30, label: 'CAS手术并发症发生率'
      }, {
        id: 31, label: 'CEA术后抗血小板治疗比率'
      }, {
        id: 32, label: 'CAS术后抗血小板治疗比率'
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      chartData: [],
      singleChartData: {}
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      this.chartData = []
      getStatisticQuotaStrokeSdc({
        hospitalId: this.$store.getters.hospitalId,
        indexes: this.indicators.join(',')
      }).then(res => {
        if (res.code === 0) {
          if (res.data && res.data.length > 0) {
            res.data.forEach(el => {
              el.index = el.index - 1
              let targetData = []
              let timeData = []
              if (el.quotaData && el.quotaData.length > 0) {
                el.quotaData.forEach(e => {
                  targetData.push(e.value ? e.value : 0)
                  timeData.push(e.timeName ? e.timeName : '')
                })
              }
              el.optionData = {
                timeData: timeData,
                targetData: targetData,
                unit: el.unit
              }
            })
          }
          this.chartData = res.data
          this.loading = false
        } else {
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    changeTime() {
      this.init()
    },
    clickIcon(index) {
      this.singleChartData = this.chartData[index]
    },
    clickZuo(index) {
      if (index === 0) {
        this.singleChartData = this.chartData[this.chartData.length - 1]
      } else {
        this.singleChartData = this.chartData[index - 1]
      }
    },
    clickYou(index) {
      if (index > this.chartData.length - 1 || index === this.chartData.length - 1) {
        this.singleChartData = this.chartData[0]
      } else {
        this.singleChartData = this.chartData[index + 1]
      }
    },
    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.indicators.push(data.id)
      } else {
        this.indicators.splice(this.indicators.indexOf(data.id), 1)
      }
      this.init()
    }
  }
}
</script>


<style lang="less">
  .chest-pain-quality{
    width: 100%;
    height: 100%;
    overflow: hidden;
    .box-chose{
      height: 80px;
      padding-left: 30px;
      padding-top: 20px;
    }
    .box-echart{
      height: ~'calc(100% - 80px)';
      overflow: auto;
      background: #f0f2f5;
      padding: 20px 20px 0 20px;
      .box-card{
        width: 32%;
        height: 506px;
        display: inline-block;
        margin: 0 10px;
        .el-card__body{
          height: ~'calc(100% - 55px)';
        }
      }
    }
  }
</style>